<template>
	<view class="commentsAndEt">
		<template v-if="listNotificationState == 'success'">
			<view
				@click="clickMarkAsRead(item.id,item.actionObject,item.actionInfo)"
				v-for="item in listNotification"
				class="for">
				<view class="avatar"><image :src="item.actionUser.avatar" mode="widthFix"></image></view>
				<view class="_right">
					<view class="_right-top">
						<text>{{item.actionUser.nickname}}</text>
						<text v-if="item.type == 7">的艾特</text>
						<text v-if="item.type == 8">的评论</text>
						<text
							class="state"
							:style="!item.readStatus?'color: #F56C6C;':''">
							{{!item.readStatus?'[未读]':'[已读]'}}
						</text>
					</view>
					<view class="_right-time">
						<text>{{item.timeAgo}}</text>
					</view>
					<view class="_right-centent-new">{{$_filterHtml(item.content)}}</view>
					<view class="_right-centent-original">
						<text v-if="item.actionInfo">{{$_filterHtml(item.actionInfo.content)}}</text>
					</view>
				</view>
			</view>
			<view
				class="all-notification"
				@click="clickAllNotification">
				<text>全部</text>
				<text style="padding-top: 5rpx;">已读</text>
			</view>
			<view
				@click="getNotification('more')"
				class="more">点击加载更多</view>
		</template>
		<template v-if="listNotificationState == 'loading'">
			<view class="skeleton-screen">
				<view class="left loading-css"></view>
				<view class="right">
					<view class="loading-css"></view>
					<view class="loading-css"></view>
					<view class="loading-css"></view>
				</view>
			</view>
		</template>
		<public-empty v-if="listNotificationState == 'empty'"></public-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listNotification:[],
				listNotificationPage:2,
				listNotificationState:"loading"
			}
		},
		onShow() {
			setTimeout(()=>{
				this.getNotification();
			},200);
		},
		onLoad() {
			
		},
		methods: {
			getNotification(more){
				if(more == 'more'){uni.showLoading({ title: "加载中" });}
				this.$_Request(
					"GET","/api/v2/notification/list",
					{
						"types":"7,8",
						"page":more == 'more' ? this.listNotificationPage : "",
					},
					(res) => {
						if(more == 'more'){
							if(res.data.data.list.length){
								this.listNotification = this.listNotification.concat(res.data.data.list);
								this.listNotificationPage++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							if(res.data.data.list.length){
								this.listNotification = res.data.data.list;
								this.listNotificationState = "success"
							}else{
								this.listNotificationState = "empty"
							}
						}
					}
				)
			},
			clickMarkAsRead(id,type,item){
				uni.showLoading();
				if(type == 4){
					// 帖子信息
					this.markAsRead(id,type,item);
				}
				if(type == 5){
					// 评论信息
					this.markAsRead(id,type,item);
				}
			},
			markAsRead(id,type,item){
				this.$_Request(
					"PUT","/api/v2/notification/mark-as-read",
					{
						"type":"choose",
						"notificationIds":id+''
					},
					(res) => {
						uni.hideLoading();
						// 帖子信息
						if(type == 4){
							this.$_To('post/post?pid=' + item.pid)
						}
						// 评论信息
						if(type == 5){
							this.$_To('comment/comment?cid=' + item.cid)
						}
					}
				)
			},
			clickAllNotification(){
				uni.showLoading();
				this.$_Request(
					"PUT","/api/v2/notification/mark-as-read",
					{
						"type":"all",
						"notificationType":"0"
					},
					(res) => {
						uni.hideLoading();
						this.getNotification();
					}
				)
			},
		}
	}
</script>

<style lang="scss">
.commentsAndEt{
	.all-notification{
		width: 80rpx;
		height: 80rpx;
		background: $HongSe;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		font-size: 22rpx;
		line-height: 22rpx;
		position: fixed;
		top: 25rpx;
		right: 25rpx;
		text{
			color: #FFF;
		}
	}
	.for{
		display: flex;
		padding: 25rpx;
		border-bottom: 1rpx solid $BeiJingSe;
		.avatar{
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			border-radius: 100%;
			flex-shrink: 0;
			background: $BeiJingSe;
		}
		._right{
			flex: 1;
			margin: 0 15rpx;
			._right-top{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				text{
					font-size: 28rpx;
					line-height: 28rpx;
					padding-right: 15rpx;
				}
				.state{
					color: $ZhanWeiSe;
					font-size: 22rpx;
					line-height: 22rpx;
				}
			}
			._right-time{
				margin-top: 15rpx;
				text{
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
				}
			}
			._right-centent-new{
				margin-top: 10rpx;
				display: -webkit-box;
				/*!autoprefixer:off*/
				-webkit-box-orient: vertical;
				/*autoprefixer:on*/
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			._right-centent-original{
				background: $BeiJingSe;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				padding: 15rpx 20rpx;
				margin-top: 15rpx;
				text{
					font-size: 28rpx;
					line-height: 28rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
					color: $ZhanWeiSe;
				}
			}
		}
	}
	.more{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
.skeleton-screen{
	display: flex;
	border-bottom: 1rpx solid $BeiJingSe;
	padding: 25rpx;
	.left{
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		border-radius: 15rpx;
		flex-shrink: 0;
	}
	.right{
		flex: 1;
		margin-left: 25rpx;
		view:nth-child(1){
			width: 100%;
			height: 40rpx;
		}
		view:nth-child(2){
			width: 100%;
			height: 120rpx;
			margin: 15rpx 0;
		}
		view:nth-child(3){
			width: 100%;
			height: 150rpx;
		}
	}
}
</style>
